<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="UTF-8">
    <title>题目</title>
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/semantic-ui@2.4.2/dist/semantic.min.css">
    <link rel="stylesheet" href="/layui/css/layui.css">
    <script src="https://cdn.jsdelivr.net/npm/jquery@3.2/dist/jquery.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/semantic-ui@2.4.2/dist/semantic.min.js"></script>
    <script src="/layui/layui.all.js"></script>
</head>
<body>

<nav th:replace="teacher/_fragments :: menu(3)" class="ui inverted  segment">
    <div class="ui container">
        <div class="ui inverted secondary menu">
            <h2 class="ui teal header item">CUMT</h2>
            <h3 class="ui teal header item">在线答题系统</h3>
            <a href="#" class="  item ">章节</a>
            <a href="#" class=" item ">知识点</a>
            <a href="#" class=" item ">题目</a>
            <a href="#" class=" item ">试卷</a>
            <a href="#" class=" item ">成绩</a>

            <div class="right menu   ">
                <div class="ui dropdown item">
                    <div class="text">
                        Zhaohaihang
                    </div>
                    <i class="dropdown icon"></i>
                    <div class="menu">
                        <a href="#" class="item">注销</a>
                    </div>
                </div>
            </div>
        </div>
    </div>
</nav>

<div class="ui  container">

    <div class="ui success message" th:unless="${#strings.isEmpty(message)}">
        <i class="close icon "></i>
        <div class="header">提示：</div>
        <P th:text="${message}">操作成功</P>
    </div>

    <div  class="ui secondary segment form">
        <input type="hidden" name="page">
        <div class="six fields">
            <div class=" required field">
                <div class="ui left labeled action  input">
                    <div class="ui  compact  teal basic label">类型</div>
                    <div class="ui fluid selection   dropdown ">
                        <input type="hidden" name="type"  >
                        <i class="dropdown icon"></i>
                        <div class=" default text ">类型</div>
                        <div class="menu">
                             <div class="item" data-value="选择题">选择题</div>
                            <div class="item" data-value="判断题">判断题</div>
                            <div class="item" data-value="填空题">填空题</div>
                        </div>
                    </div>
                </div>
            </div>

            <div class=" required field">
                <div class="ui left labeled action  input">
                    <div class="ui  compact  teal basic label">章节</div>
                    <div class="ui fluid selection   dropdown ">
                        <input type="hidden" name="chapterId"  >
                        <i class="dropdown icon"></i>
                        <div class=" default text ">章节</div>
                        <div class="menu">
                          <div  th:each="chapter : ${chapters}"  class="item"  data-value="1" th:data-value="${chapter.id}" th:text="${chapter.chapterNum}">第一章</div>
                        </div>
                    </div>
                </div>
            </div>

            <div class=" required field">
                <div class="ui left labeled action  input">
                    <div class="ui  compact  teal basic label">难度</div>
                    <div class="ui fluid selection  dropdown ">
                        <input type="hidden" name="diffcult"  >
                        <i class="dropdown icon"></i>
                        <div class=" default text ">难度</div>
                        <div class="menu">
                            <div class="item" data-value="1"><div class="ui disable star rating" data-rating="1" data-max-rating="1"></div></div>
                            <div class="item" data-value="2"><div class="ui disable star rating" data-rating="2" data-max-rating="2"></div></div>
                            <div class="item" data-value="3"><div class="ui disable star rating" data-rating="3" data-max-rating="3"></div></div>
                            <div class="item" data-value="4"><div class="ui disable star rating" data-rating="4" data-max-rating="4"></div></div>
                            <div class="item" data-value="5"><div class="ui disable star rating" data-rating="5" data-max-rating="5"></div></div>
                        </div>
                    </div>
                </div>
            </div>

            <div class=" required field">
                <div class="ui left labeled action  input">
                    <div class="ui   compact  teal basic label">创建人</div>
                    <div class="ui fluid selection   dropdown ">
                        <input type="hidden" name="teacherId"  >
                        <i class="dropdown icon"></i>
                        <div class=" default text ">创建人</div>
                        <div class="menu">
                            <div  th:each="teacher : ${teachers}"  class="item"  data-value="1" th:data-value="${teacher.id}" th:text="${teacher.name}">刘老师</div>
                        </div>
                    </div>
                </div>
            </div>
            <div class=" required field">
                <div class="ui left labeled action  input">
                    <div class="ui   compact  teal basic label">知识点</div>
                    <div class="ui fluid selection   dropdown ">
                        <input type="hidden" name="pointId"  >
                        <i class="dropdown icon"></i>
                        <div class=" default text ">知识点</div>
                        <div class="menu">
                            <div  th:each="point : ${points}"  class="item"  data-value="1" th:data-value="${point.id}" th:text="${point.name}">数组</div>
                        </div>
                    </div>
                </div>
            </div>

            <div class="field">
                <button  id ="clear-btn" class="ui  button">清空</button>
                <button type="button" id="search-btn" class="ui  orange basic button"><i class="search icon"></i>搜索</button>
            </div>
        </div>
    </div>

    <div id="table-container">
        <table class="ui celled compact teal table" th:fragment="questionList">
        <thead>
        <tr>
            <th>序号</th>
            <th>ID</th>
            <th>类型</th>
            <th>难度</th>
            <th>章节</th>
            <th>知识点</th>
            <th>分数</th>
            <th>创建人</th>
            <th>更新时间</th>
            <th>操作</th>
        </tr>
        </thead>
        <tbody>
        <tr th:each="question,iterStat : ${page.content}">
            <td th:text="${iterStat.count}">1</td>
            <td th:text="${question.id}">124</td>
            <td th:text="${question.type}">选择题</td>
            <td >
                <div class="ui disable star rating" th:data-rating="${question.diffcult}" th:data-max-rating="${question.diffcult}"></div>
            </td>
            <td th:text="${question.chapter.chapterNum}">第一章</td>
            <td ><div class="ui mini basic orange label" th:each="point : ${question.points}" th:text="${point.name}">数组</div></td>
            <td th:text="${question.score}">124</td>
            <td th:text="${question.teacher.name}">刘老师</td>
            <td th:text="${#dates.format(question.updateTime,'yyyy-MM-dd HH:MM')}">2019-12-12 12:12</td>
            <td>
                <div  class="ui popup flowing  transition hidden">
                    <textarea name=""  id="t1" th:id="t+(${iterStat.count})" cols="30" rows="10" th:text="${question.content}">11111 1+1=几</textarea>
                </div>
                <button  class="ui seeButton mini basic teal button"  th:data-thing = "${iterStat.count}"
                         onclick = "f(this.getAttribute('data-thing'));" >查看</button>
                <a href="#" th:href="@{/teacher/tea-question/{id}/input(id=${question.id})}" class="ui mini basic orange button"
                   th:classappend="${session.teacher.id} eq ${question.teacher.id} ? '' : ' disabled '">编辑</a>
                <a href="#" th:href="@{/teacher/tea-question/{id}/delete(id=${question.id})}" class="ui mini basic red button"
                   th:classappend="${session.teacher.id} eq ${question.teacher.id} ? '' : ' disabled '">删除</a>
            </td>
        </tr>
        </tbody>
        <tfoot>
        <tr>
            <th colspan="10">
                <div class="ui  mini  pagination menu" th:if="${page.totalPages}>1">
                    <a  onclick="page(this)" th:attr="data-page=${page.number}-1" class=" item" th:unless="${page.first}">上一页</a>
                    <a  onclick="page(this)" th:attr="data-page=${page.number}+1" class=" item" th:unless="${page.last}">下一页</a>
                </div>
                <a href="" th:href="@{/teacher/tea-question/input}" class="ui orange right floated mini basic button">新增</a>
            </th>
        </tr>
        </tfoot>
    </table>
    </div>

</div>

<section>
    <script type="text/javascript">
        $('.ui.dropdown').dropdown({
            on: 'hover'
        });

        $('#clear-btn')
            .on('click', function() {
                $('.ui.selection.dropdown')
                    .dropdown('clear')
                ;
            });


        $("#search-btn").click(function () {
            $("[name='page']").val(0);
            loaddata();
        });
        function loaddata() {
            $("#table-container").load(/*[[@{/teacher/tea-question/search}]]*/"/teacher/tea-question/search",{
                type : $("[name='type']").val(),
                pointId : $("[name='pointId']").val(),
                chapterId : $("[name='chapterId']").val(),
                teacherId : $("[name='teacherId']").val(),
                diffcult : $("[name='diffcult']").val(),
                page : $("[name='page']").val()
            });
        };
        function page(obj) {
            $("[name='page']").val($(obj).data("page"));
            loaddata();
        };

        function f(idd){
            var text1 ='#t'+idd;
            layer.open({
                    type: 1,
                    title: '题目详情',
                    area: ['600px', '360px'],
                    shadeClose: true, //点击遮罩关闭
                    content: $(text1).val(),
                    //content: '\<\div style="padding:20px;">自定义内容\<\/div>'
                }
            );
        };
        //消息提示初始化
        $('.message .close').on('click',function(){
            $(this).closest('.message')
                .transition('fade');
        });

        $('.ui.rating')
            .rating('disable')
        ;

    </script>
</section>


</body>
</html>